<template>
  <div class="app-container">
    <!-- 查询区域 -->
    <el-form :model="queryParams" :ref="queryFormRef" inline v-show="showSearch" label-width="auto" @keyup.enter.native="handleQuery">
        <el-form-item label="关键字" prop="keywords" >
          <el-input v-model="queryParams.keywords" placeholder="请输入关键字" clearable />
        </el-form-item>
<#list columns as column>
	<#if column.query> 
<#-- 数字框-开始 -->
		<#if column.htmlType == "inputNumber"> 
			<#if column.queryType == "BETWEEN"> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}Begin">
          <el-input v-model="queryParams.${column.javaField}Begin" placeholder="开始" clearable style="width:90px;"/>
          -
        </el-form-item>
        <el-form-item prop="${column.javaField}End" label-width="0px">
          <el-input v-model="queryParams.${column.javaField}End" placeholder="结束" clearable style="width:91px;"/>
        </el-form-item>
			<#else> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}">
          <el-input-number v-model="queryParams.${column.javaField}" placeholder="${column.formItemLabel}" clearable />
        </el-form-item>
			</#if> 
<#-- 数字框-结束 -->
<#-- 普通输入框-开始 -->
		<#elseif column.htmlType == "input" || column.htmlType == "textarea"> 
			<#if column.queryType == "BETWEEN"> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}Begin">
          <el-input v-model="queryParams.${column.javaField}Begin" placeholder="开始" clearable style="width:90px;"/>
          -
        </el-form-item>
        <el-form-item prop="${column.javaField}End" label-width="0px">
          <el-input v-model="queryParams.${column.javaField}End" placeholder="结束" clearable style="width:91px;"/>
        </el-form-item>
			<#elseif column.queryType == "LIKE"> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}Key">
          <el-input v-model="queryParams.${column.javaField}Key" placeholder="请输入关键字" clearable />
        </el-form-item>
			<#else> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}">
          <el-input v-model="queryParams.${column.javaField}" placeholder="${column.formItemLabel}" clearable />
        </el-form-item>
			</#if> 
<#-- 普通输入框-结束 -->
<#-- 下拉、单选-开始 -->
		<#elseif (column.htmlType == "select" || column.htmlType == "radio") && column.dictCode!=""> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}">
          <lam-dict-select v-model="queryParams.${column.javaField}" dictCode="${column.dictCode}" placeholder="${column.formItemLabel}" clearable />
        </el-form-item>
<#-- 下拉、单选-结束 -->
<#-- 日期控件-开始 -->
		<#elseif column.htmlType == "date" || column.htmlType == "datetime"> 
			<#if column.queryType == "BETWEEN"> 
        <el-form-item label="${column.formItemLabel}开始" prop="${column.javaField}Begin">
          <el-date-picker clearable v-model="queryParams.${column.javaField}Begin" value-format="yyyy-MM-dd" type="date" placeholder="${column.formItemLabel}">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="${column.formItemLabel}结束"prop="${column.javaField}End">
          <el-date-picker clearable v-model="queryParams.${column.javaField}End" value-format="yyyy-MM-dd" type="date" placehodelr="${column.formItemLabel}">
          </el-date-picker>
        </el-form-item>
			<#else> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}">
          <el-date-picker clearable v-model="queryParams.${column.javaField}" value-format="yyyy-MM-dd" type="date" placeholder="${column.formItemLabel}">
          </el-date-picker>
        </el-form-item>
			</#if> 
<#-- 日期控件-结束 -->
<#-- 其他控件-开始 -->
		<#else> 
        <el-form-item label="${column.formItemLabel}" prop="${column.javaField}">
          <el-input v-model="queryParams.${column.javaField}" placeholder="${column.formItemLabel}" clearable />
        </el-form-item>
		</#if> 
<#-- 其他控件-结束 -->
	</#if> 
</#list> 
        <el-form-item label-width="0px">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="tool-bar-btn">
<#if hasFuncInsert> 
      <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPerms="['${permissionPrefix}:add']">新增</el-button>
</#if> 
<#if hasFuncUpdate> 
      <el-button type="success" icon="el-icon-edit" :disabled="single" @click="handleUpdate" v-hasPerms="['${permissionPrefix}:edit']">修改</el-button>
</#if> 
<#if hasFuncDetail> 
      <el-button type="success" icon="el-icon-tickets" :disabled="single" @click="handleDetail" v-hasPerms="['${permissionPrefix}:detail']">详情</el-button>
</#if> 
<#if hasFuncImport> 
      <el-button type="info" icon="el-icon-upload2" @click="handleImport" v-hasPerms="['${permissionPrefix}:export']">导入</el-button>
</#if> 
<#if hasFuncDelete> 
      <el-button type="danger" icon="el-icon-delete" :disabled="multiple" @click="handleDelete" v-hasPerms="['${permissionPrefix}:remove']">删除</el-button>
</#if> 
<#if hasFuncExport> 
      <el-button type="warning" icon="el-icon-download" @click="handleExport" v-hasPerms="['${permissionPrefix}:export']">导出</el-button>
</#if> 
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>
    
    <!-- 表格区域 -->
    <selected-info :count="selectedRows.length" :onClearSelected="onClearSelected" />
    <el-table :ref="dataTableRef" v-loading="loading" :data="dataList" stripe border @selection-change="onSelectChange" 
          :default-sort = "defaultSort" @sort-change="onSortChange" :row-key="rowKey">
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
<#list columns as column>
	<#if column.pk> 
      <el-table-column label="编号" align="center" prop="${column.javaField}" sortable="custom" width="80"/>
	<#elseif column.list && (column.htmlType == "date" || column.htmlType == "datetime")> 
      <el-table-column label="${column.formItemLabel}" align="center" prop="${column.javaField}" width="180"/>
	<#elseif column.list && column.dictCode!=""> 
		<#if column.dictCode == "status_type"> 
      <el-table-column label="${column.formItemLabel}" align="center" width="100">
        <template slot-scope="{row}"><LamStatus :value="row.${column.javaField}" :text="row.${column.javaField}DictText"/></template>
      </el-table-column>
		<#else> 
      <el-table-column label="${column.formItemLabel}" align="center" prop="${column.javaField}DictText" width="120"/>
		</#if> 
	<#elseif column.list> 
      <el-table-column label="${column.formItemLabel}" align="center" prop="${column.javaField}" <#if column.htmlType=='textarea'>:show-overflow-tooltip="true"</#if> width="150" />
	</#if> 
</#list> 
<#if hasFuncDelete || hasFuncUpdate || hasFuncDetail > 
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="200">
        <template slot-scope="{row}">
	<#if hasFuncUpdate> 
          <el-button type="text" icon="el-icon-edit" @click="handleUpdate(row)" v-hasPerms="['${permissionPrefix}:edit']">修改</el-button>
	</#if> 
	<#if hasFuncDetail> 
          <el-button type="text" icon="el-icon-tickets" @click="handleDetail(row)" v-hasPerms="['${permissionPrefix}:detail']">详情</el-button>
	</#if> 
	<#if hasFuncDelete> 
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)" v-hasPerms="['${permissionPrefix}:remove']">删除</el-button>
	</#if>
        </template>
      </el-table-column>
</#if> 
    </el-table>
    
    <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"  @pagination="getList" />
<#if hasFuncInsert || hasFuncUpdate || hasFuncDetail> 

    <!-- 添加或修改对话框 -->
    <Edit${BusinessName} ref="formDialog" @ok="getList" />
</#if> 
<#if hasFuncImport> 

    <!-- 导入对话框 -->
    <ToImport ref="importDialog" @ok="getList"/>
</#if> 
<#if hasFuncExport> 

    <!-- 导出对话框 -->
    <ToExport ref="exportDialog" />
</#if> 

  </div>
</template>

<script>
import {httpGet, httpDel} from '@/api';
import { IndexListMixin } from '@/components/mixins/IndexListMixin';
<#if hasFuncInsert || hasFuncUpdate || hasFuncDetail> 
import Edit${BusinessName} from './edit';
</#if> 
<#if hasFuncImport> 
import ToImport from '@/components/upload/ToImport';
</#if> 
<#if hasFuncExport> 
import ToExport from '@/components/download/ToExport';
</#if> 

export default {
  name: "${BusinessName}",
  mixins:[IndexListMixin],
  components: {
<#if hasFuncInsert || hasFuncUpdate || hasFuncDetail> 
    Edit${BusinessName},
</#if> 
<#if hasFuncImport> 
    ToImport,
</#if> 
<#if hasFuncExport> 
    ToExport,
</#if> 
  },
  data() {
    return {
<#if pkColumn.javaField != 'id'> 
      //行唯一字段
      rowKey: '${pkColumn.javaField}',
</#if> 
      // 查询参数
      queryParams: {
        keywords: null,
<#list columns as column>
	<#if column.query> 
		<#if column.queryType == "BETWEEN"> 
        ${column.javaField}Begin: null,
        ${column.javaField}End: null,
		<#elseif column.queryType == "LIKE"> 
        ${column.javaField}Key: null,
		<#else> 
        ${column.javaField}: null,
		</#if> 
	</#if> 
</#list> 
        pageNum: 1,
        pageSize: 10
      },
      url: {
<#if hasFuncExport> 
      	exportXls: '${urlBase}/export',	  
</#if> 
<#if hasFuncUpdate || hasFuncDelete> 
        base: '${urlBase}/',
</#if> 
<#if hasFuncImport> 
        downloadTemplateUrl: '${urlBase}/downloadTemplate',
        uploadUrl: '${urlBase}/importData',
</#if> 
      	list: '${urlBase}/list'
      }
    };
  },
  created() {
    this.getList();
  },
  mounted(){
  },
  methods: {
    getList() {
      this.loadData(this.url.list);
    },
<#if hasFuncInsert> 
    
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.formDialog.toAdd("添加${functionName}");
    },
</#if> 
<#if hasFuncUpdate> 
    
    /** 修改按钮操作 */
    handleUpdate(row) {
      const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.selectedRowKeys
      this.$refs.formDialog.toUpdate("修改${functionName}", httpGet(this.url.base + ${pkColumn.javaField}));
    },
</#if> 
<#if hasFuncDetail> 
    
    /** 查看详情按钮操作 */
    handleDetail(row) {
      const ${pkColumn.javaField} = row.${pkColumn.javaField} || this.selectedRowKeys
      this.$refs.formDialog.toDetail("查看${functionName}详情", httpGet(this.url.base + ${pkColumn.javaField}));
    },
</#if> 
<#if hasFuncDelete> 
    
    /** 删除按钮操作 */
    handleDelete(row) {
      const ${pkColumn.javaField}s = row.${pkColumn.javaField} || this.selectedRowKeys
      this.deleteData(this.url.base, ${pkColumn.javaField}s);
    },
</#if> 
<#if hasFuncImport> 

    /** 导入按钮操作 */
    handleImport() {
      this.$refs.importDialog.openDialog({
        title: '${functionName}导入',
        uploadUrl: this.url.uploadUrl,
        downloadTemplateUrl: this.url.downloadTemplateUrl
      })
    },
</#if> 
<#if hasFuncExport> 
    
    /** 导出按钮操作 */
    handleExport() {
      this.exportData('${functionName}导出', this.url.exportXls);
    },
</#if> 

  }
};
</script>
